<template>
  <div>
    <el-button @click="abc = true" style="margin: 10px 75px" type="warning"
      >加入购物车</el-button
    >
    <el-dialog v-model="abc" title="加入购物车" width="450">
      <p>颜色</p>
      <img
      class="img"
        v-for="i in 6"
        :key="i"
        src="https://yanxuan-item.nosdn.127.net/453ac4c8f90bd6af498595179a8e8ccd.png?imageView&thumbnail=50x50&quality=95"
        alt=""
      />
      <p>数量</p>
      <div class="count">
        <button :disabled="count === 1" @click="count--">-</button>
        <span style="margin-right: 10px;">{{count}}</span>
        <button @click="count++">+</button>
      </div>
      <el-button @click="add" type="warning" style="margin-top: 20px;width: 75px;">确定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { ref } from "vue";
import { useStore } from "vuex";
export default {
  props: {
    
  },
  emits:['addCount'],
  setup(props,{emit}) {
    const store = useStore()

    const abc = ref(false);
    
    const count = ref(1)
    const all = ref(0)
    function add(){
        abc.value = false
        all.value += count.value
        emit('addCount',all.value)
        store.commit('car/updateCount',all.value)
    }

    return { abc,count,add,all };
  },
};
</script>

<style lang="less" scoped>
.el-button + .el-button {
  margin-left: 8px;
}
.count{
    margin-top: 10px;
    button{
        width: 25px;
        margin-right: 10px;
    }
}
.img{
    
    margin-right: 3px;
}
</style>